@import url('./reset.less');
@navHeight: 60px;
@carouselHeight: 400px;
@worksNavHeight: 50px;
@active-infHeight: 200px;
body {
	margin: 0 auto;
	width: 960px;
	font-size: 16px;
}
.warp {
	position: relative;
	padding-right: 300px;
	// height: 300px;
	background: #eee;
}
.nav {
	width: 100%;
	min-width: 650px;
	border-radius: 5px;
	background: #333;
	overflow: hidden;
	ul {
		min-height: @navHeight;
		text-align: center;
		overflow: hidden;
	}
	li {
		float: left;
		margin-right: 10px;
		width: 10%;
		height: @navHeight;
	}
	li:last-child {
		float: right;
	}
	a {
		display: block;
		line-height: @navHeight;
		color: #fff;
		line-height: @navHeight;
	}
	li:hover {
		background: #ccc;
		transition: background .2s ease;
	}
}
.header {
		font-size: 25px;
		line-height: 50px;
		border-radius: 10px;
		border: 1px solid #ccc;
		background: #eee;
		text-indent: 10px;
		a {
			margin-right: 10px;
			color: #000;
			font-size: 14px;
			float: right;
		}

}
.zoom {
	float: left;
	margin-left: -300px;
	box-sizing: border-box;
	position: relative;
	right: -300px;
	width: 300px;
	background: #eee;
	.header {
		margin: 0;
		background: #222;
		color: #fff;
		a {
			color: #fff;
		}
	}
	li {
		font-size: 20px;
		text-indent: 10px;
		div {
			display: inline-block;
		}
	}
}
.active-inf {
		float: left;
		margin-left: -300px;
		margin-top: 10px;
		position: relative;
		right: -300px;
		width: 300px;
		height: @active-infHeight;
		padding-left: 50px;
		box-sizing: border-box;
		background: #fff;
		ul {
			float: left;
			text-indent: 10px;
		}
		.inf-list {
			float: left;
			width: 250px;
			height: @active-infHeight;
            overflow: hidden;
            // padding-left: 10px;
			li {
				line-height: 32px;
                border-bottom: 1px solid #e6e6e6;
                display: table;
                width: 95%;
                margin: 0 auto;
                a {
                    display: table-cell;
                    width: 100%;
                    vertical-align: middle;
                    color: #000;
                    text-overflow:ellipsis;  
                    white-space:normal;   
                    overflow:hidden;
                }
                &:last-child {
                    border-bottom: none;
                }
			}
			li:after {
				content: " ";
				display: block;
				height: 1px;
				background: #333;
			}
			li:last-child:after {
				display: none;
			}
		}
		.inf-header {
    			float: left;
    			margin-left: -100%;
    			position: relative;
    			left: -50px;
    			width: 50px;
    			background: #666;
    			text-align: center;
    			color: #fff;
                height: @active-infHeight;
                display: table;
			p {
                display: table-cell;
                vertical-align: middle;
                padding: 0 12.5px;
				margin: 0;
                font-size: 20px;
				height: 25%;
			}
		}
	}
.warp {
	margin: 10px 0;
	height: @carouselHeight;
	overflow: hidden;
	.carousel {
		position: relative;
		float: left;
		width: 100%;
		height: @carouselHeight;
		min-width: 400px;
		overflow: hidden;
		.carousel-photo {
			width: 100%;
			height: @carouselHeight;			
			overflow: hidden;
		}
		.carousel-photo li {
			position: absolute;
			left: 100%;
			width: 100%;
			// transition: left .5s ease-in;
		}
		img {
			width: 100%;
			height: @carouselHeight;
			min-width: 200px;
		}
		.carousel-tag {
			position: absolute;
			right: 0;
			bottom: 0;
			margin-bottom: 10px;
			overflow: hidden;
			z-index: 1;
		}
		.carousel-tag li {
			float: left;
			margin: 0 5px;
			width: 20px;
			line-height: 20px;
			border-radius: 50%;
			background: #666;
			color: #000;
			text-align: center;
		}
		.carousel-tag li:hover {
			background: #fff;
		}
		.tag-title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 100px;
			background: rgba(0,0,0, .3);
			text-align: center;
		}
		.tag-title p {
			position: absolute;
			left: 100%;
			margin: 0;
			width: 100%;
			height: 100%;
			line-height: 100px;
			color: #fff;
			// transition: left .5s ease-in;
		}
		li.active {
			left: 0;
		}
	}
	.activeInf {
		float: left;
		box-sizing: border-box;
		margin-left: -300px;
		padding: 0 5px;
		position: relative;
		right: -300px;
		width: 300px;
		> ul {
			border-radius: 5px;
			overflow: hidden;
		}
		> ul li {
			float: left;
			width: 50%;
			border-bottom: 3px solid transparent;
			line-height: 30px;
			text-align: center;
			background: #111;
		}
		> ul li:hover {
			background: #ccc;
			border-bottom: 3px solid rgb(46, 217, 236);
		}
		> ul li a {
			color: #fff;
		}
		.tab-pane {
			background: #fff;
		}
		.tab-pane li {
			margin: 5px 0;
			border-top: 1px solid #ccc;
			text-align: center;
			overflow: hidden;
		}
		.tab-pane h2 {
			font-size: 16px;
		}
		.tab-pane span {
			float: left;
			text-indent: 16px;
		}
	}
}

.member-inf {
	.warp {
		height: auto;
	}
	img {
		float: left;
		margin: 10px;
		width: 150px;
		height: 200px;
		border: 1px solid #E7EA04;
		box-sizing: border-box;
		
	}
	.member {
		float: left;
	}
	.active-inf {
		margin-left: -320px;
	}
}

.production {
	overflow: hidden;
	h1 {
		font-size: 25px;
		background-color: #eee;
	}
	a {
		float: right;
		font-size: 14px;
	}
	img {
		float: left;
		box-sizing: border-box;
		width: 25%;
		height: 200px;
		border: 5px solid transparent;
	}
	img:hover {
		border: 5px solid #000;
	}
	.productions a{
		float: none;
	}
}

.photo-knowledge {
	overflow: hidden;
	.header {
		margin-bottom: 0;
	}
	.knowledge-pane {
		float: left;
		width: 33%;
		padding: 5px;
		box-sizing: border-box;
		text-align: center;
		div {
			position: relative;
		}
		div p {
			position: absolute;
			bottom: 0;
			margin: 0;
			width: 100%;
			line-height: 40px;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
		}
	}
	a {
		color: #2383F1;
	}
	img {
		width: 100%;
		height: 200px;
	}
	ul {
		padding-top: 30px;
		border: 1px solid #eee;
	}
	li {
		height: 30px;
		border-top: 1px solid #ccc; 
	}
}

.photoSchool {
	.warp {
		height: auto;
		overflow: hidden;
	}
	.photoLearing {
		float: left;
		padding-right: 200px;
		img {
			float: left;
			width: 100%;
			height: 100%;
		}
		> div {
			float: left;
			height: 100%;
			overflow: hidden;
		}
		.sub {
			float: right;
			margin-right: -200px;
			box-sizing: border-box;
			padding: 10px;
			width: 200px;
		}
		.second {
			margin-top: 35%;
		}
	}
}
.friendlyLink {
	margin: 10px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc; 
	background: #fff;
	a {
		color: #000;
	}
	a:last-child {
		color: #08AFE8;
	}
	a:hover {
		text-decoration: underline;
	}
}
.footer {
	text-align: center;
	.foot_link {
		font-size: 16px;
		color: #fff;
		background: #222;
		a {
			color: #fff;
		}
	}
}

.content {
	h1 {
		text-align: center;
	}
	div {
		text-align: center;
		color: #444;
	}
	p {
		text-indent: 20px;
		padding: 0 100px;
	}
	.article-link {
		text-align: left;
		font-size: 20px;
		color: #08AFE8;
	}
	ul {
			margin: 0 auto;
			width: 80%;
			text-align: center;
			overflow: hidden;
	}
	li {
		width: 50%;
		float: left;
	}
	li:before {
		content: " ";
		display: inline-block;
		margin: 3px;
		margin-right: 5px;
		width: 5px;
		height: 5px;
		line-height: 30px;
		border-radius: 50%;
		background: #08AFE8;
	}
}
.adress {
    a {
        color: #000;
        &:hover {
            color: #555;
        }
    }
}
.appreciation {
    .works {
        margin-top: 20px;
        ul {
            min-height: @worksNavHeight;
            border-radius: 5px;
            text-align: center;
            background: #2c2c2c;
        }
        li {
            float: left;
            width: 15%;
            height: @worksNavHeight;
            text-align: center;
            &:last-child {
                float: right;
                width: 40%;
                text-align: right;
            }
            &:hover {
                // border-radius: 5px;
                background:#4196ff;
                cursor: pointer;
            }
            &:last-child:hover {
                cursor: default;
                background:#2c2c2c;
            }
            &:first-child:hover {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
            a {
                font-size: 14px;
                line-height: 50px;
                color: #fff;
            }
            input {
                border: 0;
                border-radius: 6px;
                background: #fff;
                padding: 0px 10px;
            }
            span {
                font-size: 18px;
                font-weight: lighter;
                color: #fff;
            }
            input,span {
                min-height: 20px;
                margin-top: 12px;
                margin-right: 10px;
                
            }
        }
        .active-li {
            // border-radius: 5px;
            background:#4196ff;
        }
        li:first-child {
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;            
        }
        li:last-child {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;            
        }
        .appreciation-content {
        	ul {
        		height: 100%;
        		background-color: #fff;
        	}
        	li {
        		width: 20%;	
                height: 28px;
        		padding-top: 20px;
        		&:hover {
        			background-color: #fff;
        			cursor: default;
        		}
        		div {
        			position: relative;
				    display: inline-block;
				    vertical-align: middle;
	        		a {
	        			display: block;
    					color: rgb(154,154,154);
	        			cursor: pointer;
	        			line-height: 0;
	        			&:first-child {
							margin-top: -8px;
	        			}
	        			&:last-child {
	        				margin-bottom: -4px;
	        			}
	        			span {
	        				color: #000;
	        				min-height: 8px;
	        				margin: 0;
							&:hover {
								transform: scale(1.3,1.3);
							}
	        			}
	        		}
	        		.down-list {
	        			visibility: hidden;
	        			position: relative;
	        			z-index: 1;
	        			width: 80%;
	        			min-height: @worksNavHeight*3;
	        			margin: 0 auto;
	        			border: 1px solid #000;
	        			li {
	        				display: block;
	        				padding: 0;
	        				width: 100%;
	        				min-height: @worksNavHeight;
	        				text-align: center;
	        				vertical-align: middle;
							span {
	        					position: relative;
	        					top: 10px;
	        					color: #000;
	        					font-size: 16px;
        					}
	        				&:hover {
	        					background-color: #e6e6e6;
	        					cursor: pointer;
	        				}
	        			}
	        		}
        		}
				&:nth-child(4) {
					span:hover {
						transform: scale(1,1);
					}
				}
        		&:last-child {
        			a {
        				position: relative;
        				top: -12px;
                        right: 48px;
        				span {
        					color: #000;
        					&:active,&:hover,&:visited {
        						color: #000;
        					}
        				}
        				&:last-child {
        						span {
	        						color: #9c9c9c;        
	        						&:active,&:hover,&:visited {
		        						color: #000;
		        					}							
        						}
        					}
        			}
        		}

        	}
            .show-items {
                margin-bottom: 40px;
                width: 100%;
                overflow: hidden;
                .item {
                    float: left;
                    width: 25%;
                    .item-img {
                        margin: 20px;
                        img {
                            width: 100%;                        
                        }
                    }
                    .item-inf {
                        width: 50%;
                        margin: 0 auto;
                        .inf-img {
                            display: inline-block;
                            width: 50px;
                            height: 50px;
                            img {
                                width: 100%;
                                min-height: 100%;
                                border-radius: 50%;
                            }
                        }
                        .inf-text {
                                display: inline-block;
                                position: relative;
                                top:-20px;
                        }
                    }
                }
            }
            .show-items2 {
                margin-top: 10px;
                width: 100%;
                .item {
                    margin-bottom: 10px;
                    width: 100%;
                    .item-inf {
                        order: 1;
                        width: 100%;
                        border-top-left-radius: 5px;
                        border-top-right-radius: 5px;                        
                        background:#d2d2d2;
                        .inf-img {
                            margin: 10px 10px 4px 10px;
                            display: inline-block;
                            img {
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                            }
                        }
                        span {
                            position: relative;
                            top: -10px;
                            left: 10px;
                        }
                    }
                    .item-img {
                        width: 100%;
                        img {
                            width: 100%;
                        }
                    }
                }

            }
        }  
        #friend-community ,#recommended-works ,#my-works ,#friend-works  {
            display: none;
        }
        .order {
            ul {
                height: 100%;
                background-color: #2c2c2c;
            }
            li {
                width: 20%; 
                height: 30px;
                padding-top: 14px;
                color: #fff;
                &:hover {
                    background-color: #2c2c2c;
                    cursor: default;
                }
                div {
                    position: relative;
                    display: inline-block;
                    vertical-align: middle;
                    a {
                        display: block;
                        color: rgb(154,154,154);
                        cursor: pointer;
                        line-height: 0;
                        &:first-child {
                            margin-top: -8px;
                        }
                        &:last-child {
                            margin-bottom: -4px;
                        }
                        span {
                            color: #fff;
                            min-height: 8px;
                            margin: 0;
                            &:hover {
                                transform: scale(1.3,1.3);
                            }
                        }
                    }
                }
                &:last-child {
                    height: 35px;
                    padding-top: 15px;
                    a {
                        position: relative;
                        top: -12px;
                        right: 40px;
                        span {
                            color: #fff;
                            &:active,&:hover,&:visited {
                                color: #fff;
                            }
                        }
                        &:last-child {
                                span {
                                    color: #9c9c9c;        
                                    &:active,&:hover,&:visited {
                                        color: #fff;
                                    }                           
                                }
                            }
                    }
                }

            }
            .show-items {
                width: 100%;
                overflow: hidden;
                margin: 20px 0 40px 0;
                .item {
                    float: left;
                    width: 25%;
                    .item-img {
                        margin: 20px;
                        img {
                            width: 100%;                        
                        }
                    }
                    .item-inf {
                        width: 50%;
                        margin: 0 auto;
                        .inf-img {
                            display: inline-block;
                            width: 50px;
                            height: 50px;
                            img {
                                width: 100%;
                                min-height: 100%;
                                border-radius: 50%;
                            }
                        }
                        .inf-text {
                                display: inline-block;
                                position: relative;
                                top:-20px;
                        }
                    }
                }
            }

        }
    }    
    .match-inf {
        width: 100%;
        height: 400px;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    } 
    .match-text {
        margin: 20px 0;
        padding: 20px;
        border: 1px solid #e6e6e6;
    }
}
.personal-inf {
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    .personal-img {
        display: inline-block;     
        width: 50px;
        height: 50px;
        padding: 10px;
        img {
            width: 100%;
            min-height: 100%;
            border-radius: 50px;
        } 
    }
    .personal-text {
        display: inline-block;
        width: 60%;
        margin-left: 10px;
        .personal-name {
            margin: 10px 0;
            font-size: 18px;
            color: #20a8fe;
        }
        .personal-link {
            overflow: hidden;
            li {
                width: 20%;
                float: left;
                a {
                    color: #000;
                }
            }
        }
    }
}
// 摄影知识页面
.latest-events {
    margin: 10px 0;
    overflow: hidden;
    position: relative;
    height: @carouselHeight;
    .events-inf {
        margin-right: 310px;
        position: relative;
        .events-img {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            img {
                position: absolute;
                width: 100%;
                height: 400px;
                min-width: 200px;
            }
        }
        .head-mask,.content-mask {
            position: absolute;
            z-index: 2;
            width: 100%;
            background: rgba(0,0,0,.6);
            color: #fff;
            
        }
        .head-mask {
            top: 200px;
            font-size: 28px;
            text-align: center;
            p {
                display: none;
                &:nth-child(2) {
                    display: block;
                }
            }
        }
        .content-mask {
            top: 300px;            
            text-align: left;
            div {
                display: none;
                &:first-child {
                    display: block;
                }
            }
            p{
                padding-left:10px; 
                &:first-child {
                    font-size: 20px;
                }
            }
        }

    }
    .events-list {
        width: 300px;
        height: 400px;
        position: absolute;
        right: 0;
        top: 0;    
        .list-head {
            padding: 12px;
            font-size: 18px;
            border-left: 2px solid #484848;
            border-right: 2px solid #484848;
            border-bottom: 2px solid #484848;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            text-align: center;
            color: #fff;
            background: #484848;
        }
        div {
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            ul {
                width: 80%;
                margin: 0 auto;
                li {
                    position: relative;
                    width: 100%;
                    height: 37px;
                    padding: 10px 0px;
                    text-align: center;
                    border-bottom: 1px solid #e6e6e6;
                    a {
                        position: absolute;
                        left: 20%;
                        top: 30%;
                        display: inline-block;
                        overflow: hidden;
                        text-align: left;
                        width: 80%;
                        height: 20px;
                        text-overflow:ellipsis;  
                        white-space:nowrap;   
                        overflow:hidden;
                        color: #000;           
                    }
                    
                    &:last-child {
                        border: none;
                    }
                    &:hover a{
                        color: #6f882c;
                    }
                    &:hover span{
                        border: 8px solid #6f882c;
                    }
                }
                .actived {
                    span {
                        border-color: #6f882c;
                    }
                    a {
                        color: #6f882c;
                    }
                }
                li>span {
                    position: absolute;
                    left: 5%;
                    top: 37%;
                    display: inline-block;
                    border: 8px solid #000;
                    border-radius: 50%;
                }
            }
        }
    }
}
.article-inf {
    width: 72%;
    float: left;
    margin: 0 6px;
    .skill {
        width: 100%;
        margin-bottom: 10px;
        .skill-head {
            padding: 10px;
            overflow: hidden;
            background: #f7f7f7;
            border: 1px solid #c2c2c2;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            span {
                float: left;
                font-size: 18px;
            }
            a {
                float: right;
                color: #9a9a9a;
                &:focus {
                    outline: none;
                }
            }
        }
        .skill-content {
            padding: 10px;
            border-left: 1px solid #d7d7d7;
            border-right: 1px solid #d7d7d7;
            border-bottom: 1px solid #d7d7d7;      
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;      
            overflow: hidden;
            .skill-img {
                float: left;
                position: relative;
                width: 50%;
                height: 250px;  
                overflow: hidden;          
                img {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                    &:first-child {
                        z-index: 1;
                    }
                }
            }
            .skill-items {
                float: left;
                width: 50%;
                height: 250px;
                overflow: hidden;
                ul {
                    width: 100%;
                    // padding: 10px ;
                    li {
                        position: relative;
                        width: 90%;
                        margin: 0 auto;
                        height: 76px;
                        overflow: hidden;
                        padding-left: 10px;
                        padding-bottom: 2px;
                        cursor: pointer;
                        margin-bottom: 10px;
                        border-bottom: 1px solid #d7d7d7;
                        span {
                            position: absolute;
                            top: 34%;
                            display: inline-block;
                            border: 8px solid #6f882a;
                            border-radius: 8px;
                            visibility: hidden;
                        }
                        div {
                            position: absolute;
                            left: 10%;
                            display: inline-block;
                            margin-left: 10px;
                            width: 90%;
                        }
                        a {
                            text-decoration: none;
                            color: #000;
                            p {
                                width: 90%;
                                text-overflow: ellipsis;
                                white-space:nowrap;   
                                overflow:hidden;
                                margin:10px 0;
                                color: #666;
                                font-size: 18px;
                                line-height: 1.2;
                            }    
                            &:last-child {
                                width: 96%;
                            }
                            &:last-child p {
                                font-size: 14px;
                                width: 96%;
                                white-space:normal;  
                            }                        
                        }

                        &:last-child {
                            border: none;
                        }
                        &:hover {
                            a:first-child {
                                color: #6f882a;
                            }
                            span {
                                visibility: visible;
                            }
                        }

                    }
                    .actived {
                        span {
                            border-color: #6f882c;
                            visibility: visible;
                        }

                        a:first-child {
                            color: #6f882c;
                            p {
                                color: #6f882c;
                            }
                        }
                    }
                }
            }
        }
    }
    .teach-video {
        margin-bottom: 20px;
        .video-content {
            padding: 10px 20px;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            overflow: hidden;
        }
        .video-head {
            padding: 10px;
            overflow: hidden;
            background: #f7f7f7;
            border: 1px solid #c2c2c2;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            span {
                float: left;
                font-size: 18px;
            }
            a {
                float: right;
                color: #9a9a9a;
                &:focus {
                    outline: none;
                }
            }
        }
        .video-first {
            float: left;
            width: 50%;
            height: 250px;
            margin-right: 10px;
            video {
                border: 1px solid #e6e6e6;
                width: 100%;
                height: 100%;
            }
        }
        .video-others {
            width: 45%;
            float: left;
            video {
                width: 100%;
                height: 117px;
                border: 1px solid #e6e6e6;
                &:first-child {
                    margin-bottom: 10px;
                }
            }
        }
    }
}
.hot {
    width: 26%;
    float: left;
    .hot-match {
        width: 100%;
        .hot-head {
            padding: 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;    
            background: #323136;
            overflow: hidden;
            span {
                float: left;
                color: #fff;
            }
        }
        ul {
            margin-bottom:10px;
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;

            li {
                margin: 0 auto;
                margin-bottom: 5px;
                width: 95%;
                height: 320px;
                img {
                    width: 100%;
                    height: 100%;
                }
                &:first-child {
                    margin-top: 5px;
                }
            }
        }
    }
    .hot-order {
        width: 100%;
        // height: 320px;
        margin-bottom: 10px;
        // overflow: hidden;
        .hot-head {
            padding: 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;    
            background: #323136;
            overflow: hidden;
            span {
                float: left;
                color: #fff;
            }
            a {
                float: right;
                color: #848484;
            }
        }
        ul{
            border-left: 1px solid #e6e6e6;
            border-right: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            height: 325px;
            li{
                padding: 10px;
                cursor: pointer;
                overflow: hidden;
                >span{
                    display: inline-block;
                    float: left;
                    padding: 10px;
                    font-size: 18px;
                }
                img {
                    display: none;
                    float: left;
                    margin-left: 10px;
                    width: 50px;
                    height: 50px;
                }
                div {
                    position: relative;
                    left: 40px;
                    display: inline-block;
                    float: left;
                    >span {
                        position: relative;
                        top: 6px;
                        display:block;
                        font-size: 18px;
                        color: #529aff;
                    }
                    p {
                        margin: 5px 0px;
                        overflow: hidden;
                        font-size: 18px;
                        display: none;
                        color: #9a9a9a;
                    }
                }
                &:first-child:hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
                &:nth-child(2):hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
                &:nth-child(3):hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
                &:nth-child(4):hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
                &:nth-child(5):hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
                &:nth-child(6):hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
                &:last-child:hover {
                    >span {
                        position: relative;
                        top: 3px;
                        color: #ff7271;
                        transform: scale(1.4,1.4);
                    }
                    img {
                        display: block;
                    }
                    div {
                        left: 20px;
                        span {
                            top: 0;
                        }
                        p {
                            display: block;
                        }
                    }
                }
            }
        }
    }
    .hot-code {
        padding: 24px 0;
        width: 100%;
        img {
            display: block;
            margin: 0 auto;
            width: 50%;
        }
        p {
            text-align: center;
        }
    }
}
.knowlege-content {
    overflow: hidden;
}

.list {
	.content {
		padding-right: 300px;
		background: #eee;
		overflow: hidden;
		li {
			float: none;
		}
	}
	.content-list {
		float: left;
		width: 660px;
		ul {
			margin: 0;
			padding: 0;
			width: 100%;
			list-style-type: none;
			color: #000;
		}
		li {
			width: 100%;
		}
		img {
			width: 100%;
		}
		.list-pane {
			padding-left: 200px;
			overflow: hidden;
			.pane-img {
				float: left;
				width: 200px;
				margin-left: -200px;
			}
			div {
				float: left;
				box-sizing: border-box;
				padding-left: 10px;
				padding-right: 10px;
				text-align: left;
				h3 {
					margin: 0;
				}
				p {
					margin: 0;
					padding: 0;
				}
				a {
					float: right;
				}
			}
		}
	}
	.zoom {
		padding: 10px;
	}
	.zoom-game {
		ul {
			margin: 0;
			padding: 0;
			width: 100%;
			text-align: left;
			list-style-type: none;
		}
		li {
			width: 100%;
			text-indent: 0;
			div {
				float: left;
				padding: 0 10px;
			}
		}
		img {
			width: 100%;
		}
	}
}

.information {

	img {
		margin: 10px;
		width: 30%;
	}
	.warp {
		overflow: hidden;
		height: auto;
		.main {
			float: left;
			padding-right: 10px;
			 > h1 {
				text-align: center;
			}
		}
		.nav {
			margin: 20px 0;
			padding-left: 10px;
			box-sizing: border-box;
			li {
				width: 15%;
			}
			li:last-child {
				float: left;
			}
		}
	}
	.member {
		float: left;
		border: 1px solid #ccc;
		border-radius: 10px;
		background: #fff;
		overflow: hidden;
		.header {
			margin: 0;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
            border-color: transparent;
            font-weight: normal;
		}
	}
	.inf-activity {
		float: left;
		margin: 15px 0;
		border: 1px solid #ccc;
		border-radius: 10px;
		background: #fff;
		.header {
			margin: 0;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
            border-color: transparent;
            font-weight: normal;
		}
		> div {
			padding: 10px;
		}
	}
	.sub {
		float: left;
		margin-left: -305px;
		position: relative;
		right: -300px;
		width: 300px;
		.active-inf {
			float: none;
			box-sizing: border-box;
		}
	}
}

	//注册页
.register {
	background-color: #424959;
	margin-top: 50px;
	h2 {
		color: #b3b6bd;
		text-align: center;
	}
	.form-container {
		margin: 0 auto;
		.change-form {
		  margin-bottom: 10px;
		  color: #b3b6bd;
		  input {
		  	padding: 10px 16px;
		  	font-size: 15px;
		  }
			.login-text {
				display: inline-block;
				width: 38%;
			  font-size: 18px;
			  padding-top: 17px;
			  text-align: right;
			}
			.check-phone {
				width: 100px;
			}
			.sent {
				padding: 5px;
			  margin-top: 22px;
			  border-radius: 4px;
			  border: 1px solid #CCCCCC;
			/*  color: #5F5F5F;
			  background-color: #E5E5E5;*/
			}
			.btn-register {
				width: 20%;
				color: #fff;
			  background-color: #337ab7;
			  border-color: #2e6da4;
			  border-radius: 6px;
			  font-size: 18px;
			  margin-top: 10px;
			  outline: none;
			  text-decoration: none;
			}
			.check-up {
				width: 200px;
			}
			/*注册表单验证*/
			.error{
			  margin: 1px 10px;
			  display: none;
			  color: red;
			}
			label {
				font-weight: 700;
			}
		}	
		.btn-rg {
			text-align: center;
		}
		input:disabled {
		  color: rgb(84,84,84);
		}	
		.checked {
			margin-top: 20px;
			text-align: center;
		}
		.uptomember {
			display: none;
		}
	}
}